<!-- eslint-disable no-tabs -->
<template>
  <view :class="['uni-indexed-list', 'indexed-list-' + type]" ref="list" id="list">
		<scroll-view :scroll-into-view="scrollViewId" class="uni-indexed-list__scroll" scroll-y>
			<view v-for="(list, idx) in lists" :key="idx" :id="'uni-indexed-list-' + idx">
				<indexed-list-item
					:list="list"
					:loaded="loaded"
					:idx="idx"
					:showSelect="showSelect"
					@itemClick="onClick"
				></indexed-list-item>
			</view>
		</scroll-view>
    <view
			id="menus"
      class="uni-indexed-list__menu">
      <view style="color: #737373;font-size:10px;margin-bottom: 20rpx" v-if="menuTop">我的热门</view>
      <view
        v-for="(list, key) in lists"
        :key="key"
        class="uni-indexed-list__menu-item"
        :class="touchmoveIndex == key ? 'uni-indexed-list__menu--active' : ''" @click="touchMove(key)">
        <text
          class="uni-indexed-list__menu-text"
          :class="touchmoveIndex == key ? 'uni-indexed-list__menu-text--active' : ''"
          >{{ list.key }}</text
        >
      </view>
    </view>
    <!-- <view v-if="touchmove" class="uni-indexed-list__alert-wrapper">
      <text class="uni-indexed-list__alert">{{ lists[touchmoveIndex].key }}</text>
    </view> -->
  </view>
</template>
<script>
/* eslint-disable */
import indexedListItem from './uni-indexed-list-item.vue'
export default {
  name: 'UniIndexedList',
  components: {
    indexedListItem,
  },
  emits: ['click'],
  props: {
    options: {
      type: Array,
      default() {
        return []
      },
    },
    showSelect: {
      type: Boolean,
      default: false,
    },
    nameKey: { // 项名的键名，必传
      type: String,
      default: ''
    },
    countKey: { // 统计字段的键名，为空则不设置
      type: String,
      default: ''
    },
    idKey: { // id的键名，为空则设置
      type: String,
      default: ''
    },
    type: {
      type: String,
      default: 'normal' // normal：全屏，auto：自动高度
    },
    menuTop: {
      type: Boolean,
      default: false,
    }
  },
  data() {
    return {
      lists: [],
      winHeight: 0,
      itemHeight: 0,
      winOffsetY: 0,
      touchmove: false,
      touchmoveIndex: -1,
      scrollViewId: '',
      touchmovable: true,
      loaded: false,
      isPC: false,
    }
  },
  watch: {
    options: {
      handler: function () {
        this.setList()
      },
      deep: true
    }
  },
  mounted() {
    // setTimeout(() => {
    //   console.log(55555)
    //   this.setList()
    // }, 50)
    // setTimeout(() => {
    //   this.loaded = true
    // }, 300)
  },
  methods: {
    setList() {
      let index = 0
      this.lists = []
      this.options.forEach((value, index) => {
        if (value.data.length === 0) {
          return
        }
        let indexBefore = index
        let items = value.data.map(item => {
          let obj = {}
          obj['key'] = value.letter
          obj['name'] = this.nameKey ? item[this.nameKey] : item
          obj['itemIndex'] = index
          this.countKey ? obj['count'] = item[this.countKey] : null
          this.idKey ? obj['id'] = item[this.idKey] : null
          index++
          return obj
        })
        this.lists.push({
          title: value.letter,
          key: value.letter,
          items: items,
          itemIndex: indexBefore,
        })
      })
      uni
        .createSelectorQuery()
        .in(this)
        .select('#menus')
        .boundingClientRect()
        .exec(ret => {
          this.winOffsetY = ret[0].top
          this.winHeight = ret[0].height
          this.itemHeight = this.winHeight / this.lists.length
        })
    },
    touchStart(e) {
      this.touchmove = true
      let pageY = e.touches[0].pageY
      let index = Math.floor((pageY - this.winOffsetY) / this.itemHeight)
      let item = this.lists[index]
      console.log(pageY, this.winOffsetY)
      if (item) {
        this.scrollViewId = 'uni-indexed-list-' + index
        this.touchmoveIndex = index
      }
    },
    touchMove(index) {
      // let pageY = this.isPC ? e.pageY : e.touches[0].pageY
      // let index = Math.floor((pageY - this.winOffsetY) / this.itemHeight)
      if (this.touchmoveIndex === index) {
        return false
      }
      let item = this.lists[index]
      if (item) {
        this.scrollViewId = 'uni-indexed-list-' + index
        this.touchmoveIndex = index
      }
    },
    touchEnd() {
      this.touchmove = false
    },

    /**
     * 兼容 PC @tian
     */

    mousedown(e) {
      if (!this.isPC) return
      this.touchStart(e)
    },
    mousemove(e) {
      // if (!this.isPC) return
      console.log(999, e)
      this.touchMove(e)
    },
    mouseleave(e) {
      if (!this.isPC) return
      this.touchEnd(e)
    },
    onClick(e) {
      this.$emit('click', this.lists[e.idx].items[e.index])
    },
  },
}
</script>
<style lang="scss">
.uni-indexed-list {
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  flex-direction: row;
  &.indexed-list-normal{
    position: absolute;
    left: 0;
    top: 56px;
    right: 0;
    bottom: 0;
  }
  &.indexed-list-auto{
    position: relative;
    width: 100%;
    height: 100%;
  }
}

.uni-indexed-list__scroll {
  flex: 1;
}

.uni-indexed-list__menu {
  width: 24px;
  height: calc(100% - 30rpx);
  overflow-y: auto;
}
.menu-indexed-top__menu{
  width: 24px;
  position: fixed;
  top: 170rpx;
  right: 20rpx;
}

.uni-indexed-list__menu-item {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  // padding: 1px 0;
  padding: 6rpx 0;
}

.uni-indexed-list__menu-text {
  font-size: 12px;
  text-align: center;
  color: #737373;
}

.uni-indexed-list__menu-text--active {
  color: #000000;
  font-weight: bold;
  font-size: 14px;
}

.uni-indexed-list__alert-wrapper {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.uni-indexed-list__alert {
  width: 80px;
  height: 80px;
  border-radius: 80px;
  text-align: center;
  line-height: 80px;
  font-size: 35px;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.5);
}
</style>
